<template>
	<view class="" v-cloak>
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="dream约文" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<!-- <view class="top-tip display-flex" >
			<text class="top-txt1">根据订单例文展示内容阅前须知，在订单完成前您必须遵守相应条例，再次查看请点击右侧“再次查看”按钮。</text>
			<text class="top-txt2" @tap="show_msg=true">再次查看</text>
		</view> -->
		
		<view class="content">
			<view class="dantop">
				<image :src="userInfo.pic | formatImgUrl" class="head" mode=""></image>
				<view class="dancen">
					<view class="ytop">
						<view class="dantitle">
							{{userInfo.username}}
						</view>
						<image
							:src="$options.filters.formatImgUrl(userInfo.writer_level.is_active?userInfo.writer_level.level.image:userInfo.writer_level.level.hide_img)"
							@click="$go('/pages/user/grade?uid='+userInfo.membe_id)" class="danpic" mode="" v-if="userInfo.is_writer">
						</image>
						
						
						<image
							:src="$options.filters.formatImgUrl(userInfo.user_level.active_day>0?userInfo.user_level.level.image:userInfo.user_level.level.hide_img)"
							class="danji" mode="" v-if="userInfo.is_vip&&userInfo.user_level.is_active"></image>
							
							
							
							
					</view>
					<view class="qitxt">
						{{$options.filters.parseTime(form.update_time?form.update_time:form.create_time,'{y} 年 {m} 月 {d} 日 {h}:{i}')}}
					</view>
				</view>
				
			</view>
			<view>
				<rich-text style="z-index: -1;font-weight: 600;" :nodes="form.title"></rich-text>
			</view>
			<view class="wenben">
				<rich-text :nodes="form.row"></rich-text>
			</view>
			<image :src="item | formatImgUrl" class="fupic" mode="widthFix" v-for="item in form.img"
				@click="$common.previewImage(item,form.img)"></image>
				
			<view class="dibu" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}" v-if="is_gai == 1 || is_gai == 2">
				<view style="text-align: center;font-size: 20rpx;color: #999999;padding-top: 20rpx;" v-if="is_gai == 1">用户已提交了修改意见，请修改 <text style="color: #45C4B0;margin-left: 4px;font-weight: bold;" @tap="$go('/showcase/showcase/editReason?oid=' + id)">点击查看</text></view>
				
				<view style="display: flex;justify-content: center;align-items: center;padding: 10rpx 0;" >
					<view class="dili" @click="onEdit">
						<image :src="'/images/xieb.png' | formatImgUrl" class="dipic" mode=""></image>
						<view class="fatxt" >
							{{ userInfo.is_writer && canEdit ? "返回编辑" : "需要修改"}} 
						</view>
					</view>
					<view class="dilv" @click="showPop=true">
						<image :src="'/images/xiea.png' | formatImgUrl" class="dipic" mode=""></image>
						<view class="quetxt">
							上传完成
						</view>
					</view>
				</view>
				<!-- <view style="text-align: center;font-size: 20rpx;color: #999999;">已用其他方式交稿请直接选择上传完成</view> -->
			</view>
		</view>
		
		<!-- 确认提示窗 -->
		<u-popup mode="center" :show="showPop">
			<view class="mask">
				<view class="matitle">
					确认上传完成
				</view>
				<view class="matxt">
					确定后除非客户要求，将不支持修改
				</view>
				<view class="quque">
					<view class="quli" @click="showPop = false">
						取消
					</view>
					<view class="quli quactive" @click="submit">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		
		
		<u-popup :show="show_msg" mode="center" >
			<view class="baibox">
				<image :src="userInfo.pic | formatImgUrl" class="baihead" mode=""></image>
				<view class="nickname">
					阅前须知
				</view>
				<view class="xutxt">
					订单例文展示须知
				</view>
				<scroll-view class="gexu" scroll-y="true">
					<view class="geli">
						<view class="getitle">
							在查看订单例文展示内容前，请您务必仔细阅读以下内容：
						</view>
						<view class="getxt">
							<view>
								1.订单例文展示内容均受到知识产权保护。在您定稿前阅读该内容时，不得擅自复制、传播、修改、转载或以其他方式使用这些内容，否则将被视为侵犯知识产权。
							</view>
							<view>
								2.订单例文展示内容仅供您在本平台上进行阅读。未经作者本人同意，您不得将其用于任何商业或非商业目的，包括但不限于复制、传播、修改、转载或以其他方式使用，否则将被视为侵犯作者的知识产权和隐私权。
							</view>
							<view>
								3.在定稿前请与写手沟通好该稿件的版权相关内容，如因未确认版权归属导致争议，系写手与单主双方纠纷，与平台无关。
								4.如确认定稿后想再次查阅稿件，可以从我的订单进入该订单，点击查看稿件。
							</view>
							<view>
								4.如确认定稿后想再次查阅稿件，可以从我的订单进入该订单，点击查看稿件。
							</view>
						</view>
					</view>
				</scroll-view>
		
		
				<view class="fabox" @click="show_msg=false">
					<!-- <image :src="'/images/ji.png' | formatImgUrl" class="fapic" mode=""></image> -->
					<view class="fatxt">
						我同意以上内容
					</view>
				</view>
			</view>
			<image :src="'/images/close.png' | formatImgUrl" @click="show_msg = false" class="closepic" mode=""></image>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				show: false,
				form:{},
				userInfo:this.$db.get('userInfo'),
				showPop: false,
				show_msg: false,
				is_gai: '',
				canEdit: ''
			}
		},
		onLoad(e) {
			if(e.id){
				this.id = e.id
				this.getInfo()
			}else{
				this.$common.errorToShow('参数异常')
			}
			
			this.is_gai = e.is_gai ? Number(e.is_gai) : ''
			this.canEdit = e.canEdit
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
			var url = getCurrentPages()
			this.urlPath = '/' + url[0].route

		},
		methods: {
			onEdit(){
				// if(this.is_gai){
				// 	uni.redirectTo({
				// 		url: '/pages/my/upload?id=' + this.id + '&is_gai=' + this.is_gai + '&canEdit=' + this.canEdit
				// 	})
				// }else{
				// 	this.$back()
				// }
				
				uni.navigateTo({
					url: '/pages/my/upload?id=' + this.id + '&is_gai=' + this.is_gai + '&canEdit=' + this.canEdit
				})
			},
			toBack(){
				uni.navigateBack()
			},
			submit(){
				this.$api.default.request('order/cvUpload', {
					oid: this.form.oid
				}, 'POST', false).then((res) => {
					if (res.code) {
						if(this.$db.get('form')){
							this.$db.set('form','')
							this.$db.set('fileList2','')
						}
						
						uni.redirectTo({
							url:'/pages/my/connect?id='+this.form.oid
						})
					}
				})
			},
			getInfo() {
				this.$api.default.request('order/getCvInfo', {
					oid: this.id
				}, 'POST', false).then((res) => {
					if (res.code) {
						if (res.data) {
							this.form = res.data
						} else {
							this.form = {
								oid: this.id,
								title: '',
								row: '',
								img: []
							}
						}
					}
				})
			},
			 open() {
			  // console.log('open');
			},
			close() {
			  this.show = false
			  // console.log('close');
			},
			goToroom(){
				uni.navigateTo({
					url:'/pages/tim/room'
				})
			}
		}
	}
</script>

<style lang="scss">
	.top-tip {
		padding: 14rpx 18rpx;
		border-radius: 4px;
		background: rgba(69, 196, 176, 0.15);
	
		.top-txt1 {
			font-family: Source Han Sans CN;
			font-size: 12px;
			color: #45C4B0;
		}
		
		.top-txt2{
			font-family: '思源黑体';
			font-size: 8px;
			color: #45C4B0;
			border-radius: 126px;
			padding: 1px 6px 2px 6px;
			border: 1px solid #45C4B0;
			margin-left: 22px;
			white-space: nowrap;
		}
	}
	.content {
		border-top: 8rpx solid rgba(242, 245, 242, 1);
		padding: 8rpx 30rpx;
		
		.dantop{
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;
			.head{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				flex-shrink: 0;
			}
			.dancen{
				padding-left: 12rpx;
				.ytop{
					display: flex;
					align-items: center;
					.dantitle{
						padding-bottom: 8rpx;
						font-size: 28rpx;
						font-weight: 500;
						letter-spacing: 0em;
						color: #3D3D3D;
					}
					.danpic{
						width: 100rpx ;
						height: 43rpx;
					}
					.danji{
						width:100rpx;
						height: 43rpx;
					}
				}
				.qitxt{
					font-size: 24rpx;
					font-weight: normal;
					letter-spacing: 0em;
					color: #999999;
				}
			}
			
		}
		.wenben{
			font-size: 24rpx;
			line-height: 34rpx;
			padding-bottom: 20rpx;
			font-weight: normal;
			letter-spacing: 0em;
			color: #3D3D3D;
		}
		
		.fupic {
			width: 100%;
			margin-bottom: 20rpx;
		}
		.dibu{
			position: fixed;
			left: 0;
			background-color: #ffffff;
			bottom: 0;
			width: 100%;
			// height: 100rpx;
			border-top: 1px solid rgba(153, 153, 153, 0.1);
			// display: flex;
			// align-items: center;
			// justify-content: center;
			.dili{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 330rpx;
				height: 60rpx;
				border-radius: 4px;
				box-sizing: border-box;
				border: 1px solid #3D3D3D;
				margin: 0 15rpx;
			}
			.dipic{
				width: 32rpx;
				height: 32rpx;
			}
			.fatxt{
				font-size: 24rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #3D3D3D;
				padding-left: 8rpx;
			}
			.quetxt{
				font-size: 24rpx;
				font-weight: normal;
				letter-spacing: 0em;
				font-weight: bold;
				color: #ffffff;
				padding-left: 8rpx;
			}
			.dilv{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 330rpx;
				height: 60rpx;
				border-radius: 4px;
				border: 1px solid #45C4B0;
				background: #45C4B0;
				margin: 0 15rpx;
			}
		}
		
	}
	
	.mask{
		background-color: #ffffff;
		width: 534rpx;
		border-radius: 8px;
		padding-top: 48rpx;
		.matitle{
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0em;
			color: #3D3D3D;
			padding-bottom: 6rpx;
			line-height: 46rpx;
		}
		.matxt{
			font-size: 24rpx;
			font-weight: normal;
			text-align: center;
			letter-spacing: 0em;
			color: #999999;
			line-height: 34rpx;
			padding-bottom: 50rpx;
		}
		.quque{
			display: flex;
			align-items: center;
			border-top: 1px solid rgba(153, 153, 153, 0.1);
			.quli{
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #3D3D3D;
			}
			.quactive{
				background: rgba(69, 196, 176, 0.05);
			}
		}
	}
	
	.baibox {
		background-color: #ffffff;
		width: 474rpx;
		border-radius: 8px;
		opacity: 1;
		padding: 75rpx 30rpx 40rpx;
		position: relative;
	
		.baihead {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			position: absolute;
			top: -80rpx;
			left: 52%;
			margin-left: -80rpx;
		}
	
		.nickname {
			font-size: 32rpx;
			padding-bottom: 8rpx;
			font-weight: bold;
			text-align: center;
			color: #3D3D3D;
		}
	
		.xutxt {
			font-size: 24rpx;
			text-align: center;
			color: #999999;
			padding-bottom: 28rpx;
		}
	
		.gexu {
			padding-bottom: 20rpx;
			max-height: 450rpx;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			margin-bottom: 20rpx;
	
			.geli {
	
				padding-bottom: 20rpx;
	
				.getitle {
					font-size: 24rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
					flex-shrink: 0;
				}
	
				.getxt {
					padding-top: 20rpx;
					font-size: 22rpx;
					color: #999999;
					line-height: 35rpx;
	
					view {
						margin-top: 20rpx;
	
						&:first-child {
							margin-top: 0px
						}
					}
	
					;
				}
			}
		}
	
		.fabox {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 454rpx;
			height: 86rpx;
			border-radius: 8px;
			opacity: 1;
			background: #45C4B0;
			margin-top: 20rpx;
	
			.fapic {
				width: 40rpx;
				height: 40rpx;
			}
	
			.fatxt {
				font-size: 28rpx;
				font-weight: 500;
				padding-left: 14rpx;
				letter-spacing: 0em;
				color: #FFFFFF;
			}
		}
	
	}
	
	.closepic {
		width: 50rpx;
		height: 50rpx;
		margin: 40rpx auto 0;
	}
</style>